<template>
  <div class="scenic-detail-page">
    <div v-if="loading" class="loading-container">
      <el-skeleton animated :rows="5" />
    </div>
    <el-empty v-else-if="!scenicDetail" description="未找到景点详情" class="empty-scenic-detail"></el-empty>
    <div v-else class="content-wrapper">
      <!-- 悬浮窗按钮 -->
      <div
        class="sunrise-sunset-fab"
        @click="showSunriseSunsetPopup = true"
        title="查看日出日落时间"
      >
        <span class="fab-icon">🌅🌇</span>
      </div>

      <!-- 悬浮窗内容（Dialog弹窗）-->
      <el-dialog
        v-model="showSunriseSunsetPopup"
        width="850px"
        class="sunrise-sunset-dialog"
        :close-on-click-modal="true"
        :show-close="true"
        top="12vh"
      >
        <template #header>
          <div style="font-size: 18px; font-weight: bold;">
            日出日落时间 🌅🌇
          </div>
        </template>
        <div class="sunrise-sunset-section">
          <div v-if="sunriseSunsetLoading" class="sunrise-sunset-loading">
            <el-skeleton animated :rows="3" />
          </div>
          <div v-else-if="sunriseSunsetData" class="sunrise-sunset-content">
            <!-- 主要时间信息 -->
            <el-row :gutter="20" class="sun-times-row">
              <el-col :span="12">
                <div class="sun-time-card sunrise-card">
                  <div class="sun-icon-container">
                    <div class="sun-icon">🌅</div>
                    <div class="sun-animation sunrise-animation"></div>
                  </div>
                  <div class="sun-time-details">
                    <div class="sun-time-label">日出时间</div>
                    <div class="sun-time-value">{{ sunriseSunsetData.sunrise }}</div>
                    <div class="best-viewing-time">
                      最佳观赏：{{ sunriseSunsetData.bestSunriseTime }}
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="sun-time-card sunset-card">
                  <div class="sun-icon-container">
                    <div class="sun-icon">🌇</div>
                    <div class="sun-animation sunset-animation"></div>
                  </div>
                  <div class="sun-time-details">
                    <div class="sun-time-label">日落时间</div>
                    <div class="sun-time-value">{{ sunriseSunsetData.sunset }}</div>
                    <div class="best-viewing-time">
                      最佳观赏：{{ sunriseSunsetData.bestSunsetTime }}
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>

            <!-- 详细信息 -->
            <div class="sun-detailed-info">
              <el-row :gutter="15">
                <el-col :span="6">
                  <div class="info-item">
                    <div class="info-icon">☀️</div>
                    <div class="info-content">
                      <div class="info-label">日照时长</div>
                      <div class="info-value">{{ sunriseSunsetData.dayLength }}</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="info-icon">🕛</div>
                    <div class="info-content">
                      <div class="info-label">正午时间</div>
                      <div class="info-value">{{ sunriseSunsetData.solarNoon }}</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="info-icon">🌄</div>
                    <div class="info-content">
                      <div class="info-label">黄金时刻</div>
                      <div class="info-value">{{ sunriseSunsetData.goldenHour }}</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="info-icon">🌌</div>
                    <div class="info-content">
                      <div class="info-label">蓝调时刻</div>
                      <div class="info-value">{{ sunriseSunsetData.blueHour }}</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>

            <!-- 观赏建议 -->
            <div class="viewing-suggestions">
              <div class="suggestion-title">📷 摄影建议</div>
              <div class="suggestions-grid">
                <div class="suggestion-item">
                  <span class="suggestion-icon">🌅</span>
                  <div class="suggestion-text">
                    <strong>日出拍摄：</strong>提前{{ sunriseSunsetData.arrivalAdvice.sunrise }}分钟到达，选择东向观景点
                  </div>
                </div>
                <div class="suggestion-item">
                  <span class="suggestion-icon">🌇</span>
                  <div class="suggestion-text">
                    <strong>日落拍摄：</strong>提前{{ sunriseSunsetData.arrivalAdvice.sunset }}分钟到达，选择西向观景点
                  </div>
                </div>
                <div class="suggestion-item">
                  <span class="suggestion-icon">📸</span>
                  <div class="suggestion-text">
                    <strong>设备建议：</strong>三脚架、渐变镜、充足电量，注意防寒保暖
                  </div>
                </div>
                <div class="suggestion-item">
                  <span class="suggestion-icon">🌤️</span>
                  <div class="suggestion-text">
                    <strong>天气提醒：</strong>晴朗微云天气最佳，雨后初晴效果更佳
                  </div>
                </div>
              </div>
            </div>

            <!-- 当前状态提示 -->
            <div class="current-status" v-if="sunriseSunsetData.currentStatus">
              <div class="status-indicator" :class="sunriseSunsetData.currentStatus.type">
                <span class="status-icon">{{ sunriseSunsetData.currentStatus.icon }}</span>
                <span class="status-text">{{ sunriseSunsetData.currentStatus.message }}</span>
              </div>
            </div>
          </div>
          <div v-else class="sunrise-sunset-error">
            <div class="error-content">
              <div class="error-icon">😔</div>
              <p>暂时无法获取日出日落信息</p>
              <el-button size="small" type="primary" @click="reloadSunriseSunset">重新加载</el-button>
            </div>
          </div>
        </div>
      </el-dialog>

      <el-row :gutter="20">
        <el-col :span="16">
          <el-card class="scenic-detail-card">
            <template #header>
              <div class="card-header">
                <span></span>
              </div>
            </template>
            <!-- 景点图片基础轮播和简介（最上方） -->
            <div class="scenic-image-flipbook-row">
              <div class="scenic-image-flipbook">
                <div class="simple-carousel">
                  <button class="carousel-button left" @click="prevImage" v-if="scenicImages.length > 1">&#8592;</button>
                  <img :src="scenicImages[currentImageIndex]" class="flipbook-image" :alt="scenicDetail.scenicAreaName" />
                  <button class="carousel-button right" @click="nextImage" v-if="scenicImages.length > 1">&#8594;</button>
                  <div class="carousel-indicators" v-if="scenicImages.length > 1">
                    <span v-for="(img, idx) in scenicImages" :key="idx" :class="{ active: idx === currentImageIndex }" @click="currentImageIndex = idx"></span>
                  </div>
                </div>
              </div>
              <div class="image-caption">
                <!-- 已去除底部描述 -->
              </div>
            </div>
            <!-- 景点信息、点赞收藏等全部放在图片下方 -->
            <div class="scenic-info-section">
              <h3>{{ scenicDetail.scenicAreaName }}</h3>
              <p class="region-info">{{ provinceAndCity }}</p>
              <p class="scenic-address" v-if="scenicDetail.detailAddress">
                {{ scenicDetail.detailAddress }}
              </p>
              <p class="scenic-description">{{ scenicDetail.scenicSpotDescription }}</p>
              <div class="social-actions">
                <button class="action-button like-button" @click="toggleLike()" :class="{ 'is-active': isLiked }">
                  <el-icon>
                    <Star />
                  </el-icon>
                  {{ isLiked ? '已点赞' : '点赞' }}
                </button>
                <button class="action-button collect-button" @click="toggleCollect()"
                  :class="{ 'is-active': isCollected }">
                  <el-icon>
                    <Collection />
                  </el-icon>
                  {{ isCollected ? '已收藏' : '收藏' }}
                </button>
              </div>
            </div>
            <el-divider />

            <div class="weather-section">
              <h3>天气</h3>
              <WeatherForecast :city="scenicCityCode" />
            </div>

            <el-divider />

            <div class="map-section">
              <h3>地图</h3>
              <el-row :gutter="20" class="map-guides-row">
                <el-col :span="14">
                  <div class="map-box">
                    <div ref="amapContainer" class="amap-container"></div>
                  </div>
                </el-col>
                <el-col :span="10">
                  <div class="route-panel">
                    <template v-if="routeGroups.length">
                      <div class="route-group" v-for="(group, groupIdx) in routeGroups" :key="groupIdx">
                        <div class="route-group-header">
                          <span v-if="groupIdx === 0" class="route-start-point">起</span>
                          <span v-if="groupIdx === routeGroups.length - 1" class="route-end-point">终</span>
                          <strong class="road-name">{{ group.road }}</strong>
                          <span class="route-details">
                            {{ group.distance }}
                            <el-tag v-if="group.trafficLight > 0" type="danger" size="small" class="ml8">
                              红绿灯 {{ group.trafficLight }} 个
                            </el-tag>
                          </span>
                        </div>
                        <div class="route-group-steps">
                          <div class="route-step" v-for="(ins, insIdx) in group.instructions" :key="insIdx">
                            <span class="route-arrow">{{ getActionIcon(ins.action) }}</span>
                            <span>{{ ins.instruction }}</span>
                          </div>
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <div class="no-route-tip">暂无路线信息，请点击下方按钮进行路线规划。</div>
                    </template>
                  </div>
                </el-col>
              </el-row>
              <div class="map-actions">
                <el-button type="primary" @click="planDriveRoute">驾车路线（中南民族大学 → 景区）</el-button>
                <!-- <span class="view-more map-view-more">查看更多</span> -->
              </div>
            </div>

            <el-divider />

            <div class="group-tour-section">
              <h3>跟团游推荐</h3>
              <div class="tour-list">
                <div class="tour-item-card" v-for="tour in groupTours" :key="tour.id">
                  <img :src="tour.img" alt="Tour Image" class="tour-card-image">
                  <div class="tour-card-info">
                    <div class="tour-card-title">{{ tour.title }}</div>
                    <div class="tour-card-details">
                      <span>景点: {{ tour.scenic }}</span>
                      <span>时间: {{ tour.time }}</span>
                      <span>跟团人数: {{ tour.participants }}</span>
                      <span>已报名: {{ tour.registered }}</span>
                    </div>
                  </div>
                  <el-button type="text" class="view-tour-details-btn"
                    @click="goToGroupTourDetail(tour.id)">查看详细</el-button>
                </div>
                <span class="view-more themed-view-more" @click="viewMoreGroupTours">查看更多</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="comments-card">
            <template #header>
              <div class="card-header">
                <span>评论</span>
              </div>
            </template>
            <div class="comment-list">
              <div v-for="comment in comments" :key="comment.scenicCommentId" class="comment-item">
                <div class="comment-header">
                  <img :src="comment.userAvatar || 'https://via.placeholder.com/40x40?text=User'" alt="User Avatar"
                    class="user-avatar" @click="goToUserProfile(comment.userId)" style="cursor: pointer;">
                  <span class="user-name">{{ comment.userName || `用户 ${comment.userId}` }}</span>
                  <span class="comment-date">{{ formatCommentTime(comment.commentTime) }}</span>
                </div>
                <div class="comment-content">
                  <p>{{ comment.commentContent }}</p>
                </div>
              </div>
              <el-button type="text" class="load-more-comments">加载更多...</el-button>
            </div>
            <div class="comment-input-section">
              <el-input v-model="newComment" placeholder="请输入您的评论"></el-input>
              <el-button type="primary" @click="submitComment">提交</el-button>
            </div>
          </el-card>
          <el-card class="hotel-recommendation-card" style="margin-top: 20px;">
            <template #header>
              <div class="card-header">
                <span>附近酒店推荐</span>
              </div>
            </template>
            <div class="hotel-list">
              <div class="hotel-item-box" v-for="hotel in hotels" :key="hotel.hotelId" @click="goToHotel(hotel.hotelLinks)">
                <img :src="hotel.image || 'https://via.placeholder.com/200x120?text=Hotel+Image'" alt="Hotel Image" class="hotel-box-image">
                <div class="hotel-box-info">
                  <div class="hotel-box-title">{{ hotel.hotelName }}</div>
                  <div class="hotel-box-rating">
                    ❤️❤️❤️❤️
                    <span>{{ hotel.rating || '4.8' }}</span>
                    <span class="reviews-count">{{ hotel.reviews || '' }}</span>
                  </div>
                  <div class="hotel-box-details">
                    <span class="hotel-tag">超棒</span>
                    <span class="hotel-box-price">¥ {{ hotel.minimumPrice }}</span>
                  </div>
                  <div class="hotel-actions">
                    <el-button
                      :type="hotel.isCollected ? 'warning' : 'primary'"
                      :icon="hotel.isCollected ? 'el-icon-star-on' : 'el-icon-star-off'"
                      size="small"
                      @click.stop="toggleHotelCollect(hotel)"
                    >
                      {{ hotel.isCollected ? '已收藏' : '收藏' }}
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
import {
  ElMessage, ElCard, ElEmpty, ElSkeleton, ElRow, ElCol, ElDivider, ElInput, ElButton, ElTag, ElDialog
} from 'element-plus';
import { Star, Collection } from '@element-plus/icons-vue';
import WeatherForecast from '@/components/WeatherForecast.vue';
import { regionMap } from '@/utils/regionMap'
import { cityCodeMap } from '@/utils/cityCodeMap'
import { Carousel, Slide } from 'vue3-carousel'
import 'vue3-carousel/dist/carousel.css'

export default {
  name: 'ScenicDetail',
  components: {
    ElCard, ElEmpty, ElSkeleton, ElRow, ElCol, ElDivider, ElInput, ElButton, ElTag, Star, Collection, WeatherForecast, ElDialog,
    Carousel, Slide
  },
  props: ['id'],
  data() {
    return {
      showSunriseSunsetPopup: false, // 控制弹窗可见性
      scenicSpotId: null,
      scenicDetail: null,
      loading: true,
      messageInstance: null,
      isComponentMounted: false,
      cancelSource: null,
      currentImageIndex: 0,
      scenicImages: [], // 确保是图片链接数组
      newComment: '',
      currentUserId: null,
      isLiked: false,
      isCollected: false,
      comments: [],
      groupTours: [],
      amapLoaded: false,
      amapMarker: null,
      routeGroups: [],
      hotels: [], // 动态酒店数据
      // 日出日落相关数据
      sunriseSunsetData: null,
      sunriseSunsetLoading: false,
      scenicCoordinates: null, // 存储景点的经纬度
    astronomicalInfo: null,  // 新增：天文信息
    photographySettings: null, // 新增：摄影参数建议
    hotels: [], // 酒店列表
    hotelLoading: false, // 酒店加载状态
    hotelError: null, // 酒店错误信息
    };
  },
  computed: {
    scenicCityCode() {
      if (
        this.scenicDetail &&
        this.scenicDetail.regionId &&
        regionMap[this.scenicDetail.regionId]
      ) {
        const cityName = regionMap[this.scenicDetail.regionId].city;
        return (
          cityCodeMap[cityName] ||
          cityCodeMap[cityName.replace('市', '')] ||
          "420100"
        );
      }
      return "420100";
    },
    provinceAndCity() {
      if (this.scenicDetail && this.scenicDetail.regionId && regionMap[this.scenicDetail.regionId]) {
        const region = regionMap[this.scenicDetail.regionId]
        return `${region.province} ${region.city}`
      }
      return '未知地区'
    }
  },
  methods: {
    //日出日落
async fetchSunriseSunset(lng, lat) {
  this.sunriseSunsetLoading = true;
  try {
    const resp = await axios.get('https://api.sunrise-sunset.org/json', {
      params: { lat, lng, formatted: 0 }
    });
    
    if (resp.data && resp.data.status === "OK") {
      const result = resp.data.results;
      const now = new Date();
      
      // 基础时间数据
      const sunriseTime = new Date(result.sunrise);
      const sunsetTime = new Date(result.sunset);
      const solarNoonTime = new Date(result.solar_noon);
      
      // 计算最佳观赏时间（提前和延后的时间段）
      const bestSunriseStart = new Date(sunriseTime.getTime() - 20 * 60 * 1000); // 提前20分钟
      const bestSunriseEnd = new Date(sunriseTime.getTime() + 10 * 60 * 1000);   // 延后10分钟
      const bestSunsetStart = new Date(sunsetTime.getTime() - 30 * 60 * 1000);   // 提前30分钟
      const bestSunsetEnd = new Date(sunsetTime.getTime() + 15 * 60 * 1000);     // 延后15分钟
      
      // 黄金时刻和蓝调时刻计算
      const goldenHourStart = new Date(sunsetTime.getTime() - 60 * 60 * 1000);   // 日落前1小时
      const goldenHourEnd = new Date(sunsetTime.getTime() + 20 * 60 * 1000);     // 日落后20分钟
      
      const blueHourStart = new Date(sunsetTime.getTime() + 10 * 60 * 1000);     // 日落后10分钟
      const blueHourEnd = new Date(sunsetTime.getTime() + 40 * 60 * 1000);       // 日落后40分钟
      
      // 获取当前状态
      const currentStatus = this.getCurrentSunStatus(now, sunriseTime, sunsetTime, solarNoonTime);
      
      this.sunriseSunsetData = {
        // 基础时间信息
        sunrise: sunriseTime.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
        sunset: sunsetTime.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
        solarNoon: solarNoonTime.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
        
        // 日照时长（格式化）
        dayLength: this.formatDayLength(result.day_length),
        
        // 最佳观赏时间
        bestSunriseTime: `${bestSunriseStart.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} - ${bestSunriseEnd.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`,
        bestSunsetTime: `${bestSunsetStart.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} - ${bestSunsetEnd.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`,
        
        // 摄影黄金时间
        goldenHour: `${goldenHourStart.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} - ${goldenHourEnd.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`,
        blueHour: `${blueHourStart.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} - ${blueHourEnd.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`,
        
        // 到达建议
        arrivalAdvice: {
          sunrise: 30, // 建议提前30分钟到达
          sunset: 45   // 建议提前45分钟到达
        },
        
        // 当前状态
        currentStatus: currentStatus,
        
        // 原始数据（用于其他计算）
        rawData: {
          sunriseTime,
          sunsetTime,
          solarNoonTime,
          bestSunriseStart,
          bestSunriseEnd,
          bestSunsetStart,
          bestSunsetEnd
        }
      };
    } else {
      this.sunriseSunsetData = null;
    }
  } catch (e) {
    console.error('获取日出日落数据失败:', e);
    this.sunriseSunsetData = null;
  }
  this.sunriseSunsetLoading = false;
},

// 格式化日照时长
formatDayLength(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  return `${hours}小时${minutes}分钟`;
},

// 获取当前太阳状态
getCurrentSunStatus(now, sunriseTime, sunsetTime, solarNoonTime) {
  const currentTime = now.getTime();
  const sunrise = sunriseTime.getTime();
  const sunset = sunsetTime.getTime();
  const noon = solarNoonTime.getTime();
  
  // 日出前1小时到日出后30分钟 - 日出时段
  if (currentTime >= sunrise - 60 * 60 * 1000 && currentTime <= sunrise + 30 * 60 * 1000) {
    const minutesToSunrise = Math.round((sunrise - currentTime) / (1000 * 60));
    if (minutesToSunrise > 0) {
      return {
        type: 'sunrise',
        icon: '🌅',
        message: `距离日出还有 ${minutesToSunrise} 分钟，是观赏日出的好时机！`
      };
    } else {
      return {
        type: 'sunrise',
        icon: '🌅',
        message: '日出进行中，正是拍摄的最佳时刻！'
      };
    }
  }
  
  // 日落前1小时到日落后30分钟 - 日落时段
  if (currentTime >= sunset - 60 * 60 * 1000 && currentTime <= sunset + 30 * 60 * 1000) {
    const minutesToSunset = Math.round((sunset - currentTime) / (1000 * 60));
    if (minutesToSunset > 0) {
      return {
        type: 'sunset',
        icon: '🌇',
        message: `距离日落还有 ${minutesToSunset} 分钟，准备观赏落日美景！`
      };
    } else {
      return {
        type: 'sunset',
        icon: '🌇',
        message: '日落进行中，黄金时刻不容错过！'
      };
    }
  }
  
  // 夜晚时段
  if (currentTime < sunrise || currentTime > sunset + 60 * 60 * 1000) {
    const nextSunrise = currentTime < sunrise ? sunriseTime : new Date(sunrise + 24 * 60 * 60 * 1000);
    const hoursToSunrise = Math.round((nextSunrise.getTime() - currentTime) / (1000 * 60 * 60));
    return {
      type: 'night',
      icon: '🌌',
      message: `夜深了，距离下次日出还有约 ${hoursToSunrise} 小时`
    };
  }
  
  // 白天时段
  const hoursToSunset = Math.round((sunset - currentTime) / (1000 * 60 * 60));
  return {
    type: 'day',
    icon: '☀️',
    message: `阳光明媚的白天，距离日落还有约 ${hoursToSunset} 小时`
  };
},

// 重新加载日出日落数据
async reloadSunriseSunset() {
  if (this.scenicCoordinates) {
    await this.fetchSunriseSunset(this.scenicCoordinates.lng, this.scenicCoordinates.lat);
  } else {
    ElMessage.warning('无法获取景点坐标信息');
  }
},

// 获取今日天文信息（额外功能）
async getAstronomicalInfo(lng, lat) {
  try {
    // 可以集成更多天文API，如月相、行星位置等
    const moonPhaseApi = `https://api.astronomyapi.com/api/v2/moon-phase`;
    // 这里可以添加更多天文数据的获取
    
    return {
      moonPhase: '🌕', // 示例数据
      planetVisibility: ['金星', '火星'], // 示例数据
      stargazingQuality: '良好' // 示例数据
    };
  } catch (error) {
    console.error('获取天文信息失败:', error);
    return null;
  }
},

// 计算摄影参数建议（额外功能）
getPhotographySettings(timeType, weather = 'clear') {
  const settings = {
    sunrise: {
      clear: {
        iso: '100-400',
        aperture: 'f/8-f/11',
        shutterSpeed: '1/60-1/125s',
        whiteBalance: '5500K',
        tips: '使用渐变镜平衡光比，注意前景选择'
      },
      cloudy: {
        iso: '200-800',
        aperture: 'f/5.6-f/8',
        shutterSpeed: '1/30-1/60s',
        whiteBalance: '5200K',
        tips: '云层可作为天然柔光箱，注意色温调整'
      }
    },
    sunset: {
      clear: {
        iso: '100-400',
        aperture: 'f/8-f/16',
        shutterSpeed: '1/30-1/60s',
        whiteBalance: '4500K',
        tips: '可以拍摄剪影效果，注意天空色彩层次'
      },
      cloudy: {
        iso: '400-1600',
        aperture: 'f/5.6-f/8',
        shutterSpeed: '1/15-1/30s',
        whiteBalance: '4000K',
        tips: '云层丰富画面层次，延长快门时间'
      }
    }
  };
  
  return settings[timeType]?.[weather] || settings[timeType]?.clear;
},

    // 路线分组和数据组装
    processStepsToGroups(steps) {
      if (!steps || !steps.length) return [];
      const groups = [];
      let currentGroup = null;
      steps.forEach((step, idx) => {
        // 合并相同路段为一个分组，否则每步也可单独分组
        if (!currentGroup || currentGroup.road !== step.road) {
          if (currentGroup) groups.push(currentGroup);
          currentGroup = {
            road: step.road || '无名道路',
            distance: (step.distance / 1000).toFixed(1) + '公里',
            trafficLight: step.traffic_light || 0,
            instructions: []
          };
        }
        currentGroup.instructions.push({
          action: step.action,
          instruction: step.instruction
        });
      });
      if (currentGroup) groups.push(currentGroup);
      return groups;
    },
    getActionIcon(action) {
      if (!action) return '➡️';
      if (action.includes('左')) return '⬅️';
      if (action.includes('右')) return '➡️';
      if (action.includes('直')) return '⬆️';
      if (action.includes('调头')) return '↩️';
      return '➡️';
    },
    async planDriveRoute() {
      try {
        const startRes = await axios.get('/api/amap/geocode', {
          params: { province: '湖北省', city: '武汉市', scenicName: '中南民族大学' }
        });
        const { lng: startLng, lat: startLat } = startRes.data || {};

        const region = regionMap[this.scenicDetail.regionId];
        if (!region) {
          this.$message.error('景区地区信息缺失');
          return;
        }
        const endRes = await axios.get('/api/amap/geocode', {
          params: { province: region.province, city: region.city, scenicName: this.scenicDetail.scenicAreaName }
        });
        const { lng: endLng, lat: endLat } = endRes.data || {};

        if (!startLng || !startLat || !endLng || !endLat) {
          this.$message.error('经纬度无效，无法规划路线');
          return;
        }

        const routeRes = await axios.get('/api/amap/driving-route', {
          params: { startLng, startLat, endLng, endLat }
        });

        const { distance, duration, steps } = routeRes.data;
        if (!steps || steps.length === 0) {
          this.$message.error('无路线信息');
          this.routeGroups = [];
          return;
        }

        await this.loadAMapScript();

        const pathArr = [];
        steps.forEach(step => {
          step.polyline.split(';').forEach(pstr => {
            const [lng, lat] = pstr.split(',').map(Number);
            pathArr.push([lng, lat]);
          });
        });

        const map = new window.AMap.Map(this.$refs.amapContainer, {
          zoom: 7,
          center: pathArr[0],
          resizeEnable: true
        });
        const polyline = new window.AMap.Polyline({
          path: pathArr,
          isOutline: true,
          outlineColor: '#ffeeff',
          borderWeight: 2,
          strokeColor: "#3366FF",
          strokeWeight: 5,
          strokeOpacity: 0.9
        });
        map.add(polyline);
        map.setFitView([polyline]);

        new window.AMap.Marker({ position: pathArr[0], map, title: '起点' });
        new window.AMap.Marker({ position: pathArr[pathArr.length - 1], map, title: '终点' });

        // 路线面板分组数据
        this.routeGroups = this.processStepsToGroups(steps);

        this.$message.success(`驾车距离：${(distance / 1000).toFixed(1)}公里，预计时间：${(duration / 60).toFixed(1)}分钟`);
      } catch (e) {
        console.error('路线规划失败：', e);
        this.routeGroups = [];
        this.$message.error('路径规划失败');
      }
    },

      // 实现酒店跳转功能
  goToHotel(hotelLinks) {
    if (!hotelLinks) {
      ElMessage.warning('该酒店暂无链接信息');
      return;
    }

    // 处理不同格式的链接
    let targetUrl = hotelLinks;
    
    // 如果是数组，取第一个链接
    if (Array.isArray(hotelLinks)) {
      targetUrl = hotelLinks[0];
    }

    // 确保链接格式正确
    if (targetUrl && !targetUrl.startsWith('http://') && !targetUrl.startsWith('https://')) {
      targetUrl = 'https://' + targetUrl;
    }

    if (targetUrl) {
      try {
        // 在新标签页中打开酒店链接
        window.open(targetUrl, '_blank', 'noopener,noreferrer');
      } catch (error) {
        console.error('打开酒店链接失败:', error);
        ElMessage.error('无法打开酒店链接');
      }
    } else {
      ElMessage.warning('酒店链接格式不正确');
    }
  },

// 优化后的 fetchHotelsByScenicSpot 方法，确保获取酒店链接
  async fetchHotelsByScenicSpot(scenicSpotId) {
    if (!scenicSpotId) {
      this.hotels = [];
      return;
    }
    
    try {
      this.hotelLoading = true;
      
      const res = await axios.get(`http://localhost:8080/hot/search/scenic-spot/limit`, {
        params: { scenicSpotId, limit: 6 },
        timeout: 10000
      });
      
      const hotels = res.data || [];
      
      if (hotels.length === 0) {
        this.hotels = [];
        console.log('该景区暂无关联酒店');
        return;
      }

      const loginId = localStorage.getItem('loginId');
      let currentUserId = null;
      if (loginId) {
        try {
          const userRes = await axios.get(`http://localhost:8080/mw/UserByLoginId?loginId=${loginId}`);
          currentUserId = userRes.data ? userRes.data.userId : null;
        } catch (error) {
          console.warn('获取用户信息失败:', error);
        }
      }

      const hotelsWithInfo = await Promise.allSettled(
        hotels.map(async hotel => {
          const hotelInfo = { ...hotel };
          
          // 获取酒店图片
          try {
            const imgRes = await axios.get(`http://localhost:8080/hot/images/${hotel.hotelId}`, {
              timeout: 5000
            });
            hotelInfo.image = (imgRes.data && imgRes.data.length > 0) ? imgRes.data[0] : '';
          } catch (error) {
            console.warn(`获取酒店${hotel.hotelId}图片失败:`, error);
            hotelInfo.image = '';
          }
          
          // 检查收藏状态
          let isCollected = false;
          if (currentUserId) {
            try {
              const collectCheckRes = await axios.get(
                `http://localhost:8080/hotelCollect/checkFavorite?userId=${currentUserId}&hotelId=${hotel.hotelId}`,
                { timeout: 3000 }
              );
              isCollected = collectCheckRes.data;
            } catch (error) {
              console.warn(`检查酒店${hotel.hotelId}收藏状态失败:`, error);
              isCollected = false;
            }
          }
          hotelInfo.isCollected = isCollected;

          // 确保酒店链接信息完整
          // 如果数据库中的字段名不是 hotelLinks，请根据实际字段名调整
          if (!hotelInfo.hotelLinks && hotelInfo.hotelLink) {
            hotelInfo.hotelLinks = hotelInfo.hotelLink;
          }

          const seed = hotel.hotelId;
          const rating = (4.0 + (seed % 100) / 100).toFixed(1);
          const reviewCount = 100 + (seed % 4900);
          hotelInfo.rating = rating;
          hotelInfo.reviews = `${reviewCount}条评论`;
          
          return hotelInfo;
        })
      );

      this.hotels = hotelsWithInfo
        .filter(result => result.status === 'fulfilled')
        .map(result => result.value);
        
      console.log(`成功获取到${this.hotels.length}个酒店信息`);
      
    } catch (error) {
      console.error('获取酒店列表失败：', error);
      this.hotels = [];
      
      if (error.code === 'ECONNABORTED') {
        ElMessage.error('获取酒店信息超时，请稍后重试');
      } else if (error.response?.status === 404) {
        ElMessage.warning('该景区暂无关联酒店');
      } else {
        ElMessage.error('获取酒店信息失败');
      }
    } finally {
      this.hotelLoading = false;
    }
  },

// 新增：重新加载酒店信息
async reloadHotels() {
  if (this.scenicSpotId) {
    await this.fetchHotelsByScenicSpot(this.scenicSpotId);
  }
},

// 优化后的酒店收藏切换方法
async toggleHotelCollect(hotel) {
  if (!this.currentUserId) {
    ElMessage.warning('请先登录才能收藏酒店');
    return;
  }

  // 防止重复点击
  if (hotel.collectLoading) return;
  hotel.collectLoading = true;

  try {
    if (hotel.isCollected) {
      // 取消收藏
      await axios.delete(
        `http://localhost:8080/hotelCollect/deleteByUserAndHotel?userId=${this.currentUserId}&hotelId=${hotel.hotelId}`,
        { timeout: 5000 }
      );
      hotel.isCollected = false;
      ElMessage.success('取消收藏成功');
    } else {
      // 添加收藏
      await axios.post('http://localhost:8080/hotelCollect/add', {
        userId: this.currentUserId,
        hotelId: hotel.hotelId,
        favoriteTime: new Date().toISOString()
      }, { timeout: 5000 });
      hotel.isCollected = true;
      ElMessage.success('收藏成功');
    }
  } catch (error) {
    console.error('酒店收藏操作失败：', error);
    if (error.code === 'ECONNABORTED') {
      ElMessage.error('操作超时，请稍后重试');
    } else {
      ElMessage.error('操作失败，请稍后重试');
    }
  } finally {
    hotel.collectLoading = false;
  }
},
    async fetchScenicDetail(scenicSpotId) {
      if (!scenicSpotId) return;
      this.loading = true;
      ElMessage.closeAll();
      if (this.messageInstance) {
        this.messageInstance.close();
        this.messageInstance = null;
      }
      if (this.cancelSource) {
        this.cancelSource.cancel('New request initiated for ScenicDetail.');
      }
      this.cancelSource = axios.CancelToken.source();

      try {
        const response = await axios.get(`/mw/detailVO/${scenicSpotId}`, {
          cancelToken: this.cancelSource.token
        });
        this.scenicDetail = response.data;
        if (this.scenicDetail.scenicSpotImageLinks && this.scenicDetail.scenicSpotImageLinks.length > 0) {
          this.scenicImages = this.scenicDetail.scenicSpotImageLinks;
        } else if (this.scenicDetail.scenicSpotLink) {
          this.scenicImages = [this.scenicDetail.scenicSpotLink];
        } else {
          this.scenicImages = ['https://via.placeholder.com/800x400'];
        }
        this.currentImageIndex = 0;
        this.cancelSource = null;

        const loginId = localStorage.getItem('loginId');
        if (loginId) {
          const userRes = await axios.get(`http://localhost:8080/mw/UserByLoginId?loginId=${loginId}`);
          this.currentUserId = userRes.data.userId;

          if (this.currentUserId) {
            try {
              const likeCheckRes = await axios.get(`http://localhost:8080/sclike/checkLike?userId=${this.currentUserId}&scenicSpotId=${scenicSpotId}`);
              this.isLiked = likeCheckRes.data;
            } catch (likeError) {
              this.isLiked = false;
            }

            try {
              const collectCheckRes = await axios.get(`http://localhost:8080/sf/checkFavorite?userId=${this.currentUserId}&scenicSpotId=${scenicSpotId}`);
              this.isCollected = collectCheckRes.data;
            } catch (collectError) {
              this.isCollected = false;
            }
          }
        }

        // 关键：地图定位
        this.$nextTick(() => {
          setTimeout(() => {
            this.initAMap(); // 地图初始化
          }, 100);
        });

      } catch (error) {
        if (axios.isCancel(error)) {
          // ignore
        } else {
          // ignore
        }
      } finally {
        this.loading = false;
      }
    },
      formatCommentTime(time) {
    if (!time) return '';
    const date = new Date(time);
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    const h = String(date.getHours()).padStart(2, '0');
    const min = String(date.getMinutes()).padStart(2, '0');
    return `${y}-${m}-${d} ${h}:${min}`;
  },
    // 其余 methods 保持不变...
    prevImage() {
      this.currentImageIndex = (this.currentImageIndex - 1 + this.scenicImages.length) % this.scenicImages.length;
    },
    nextImage() {
      this.currentImageIndex = (this.currentImageIndex + 1) % this.scenicImages.length;
    },
    async submitComment() {
      if (!this.currentUserId) {
        ElMessage.warning('请先登录才能评论。');
        return;
      }
      if (!this.newComment.trim()) {
        ElMessage.warning('评论内容不能为空。');
        return;
      }

      const commentData = {
        userId: Number(this.currentUserId),
        scenicSpotId: Number(this.scenicSpotId),
        commentContent: this.newComment.trim(),
        commentTime: new Date().toISOString(),
        parentCommentId: null
      };

      try {
        await axios.post('http://localhost:8080/mw/sceniccomment/add', commentData);
        this.newComment = '';
        await this.fetchScenicComments(this.scenicSpotId);
        ElMessage.success('评论提交成功！');
      } catch (error) {
        ElMessage.error('评论提交失败，请稍后再试。');
      }
    },
    async toggleLike() {
      if (!this.currentUserId) {
        ElMessage.warning('请先登录才能点赞。');
        return;
      }

      try {
        if (this.isLiked) {
          await axios.delete(`http://localhost:8080/sclike/deleteByUserAndScenic?userId=${this.currentUserId}&scenicSpotId=${this.scenicSpotId}`);
          this.isLiked = false;
          ElMessage.success('取消点赞成功！');
        } else {
          await axios.post('http://localhost:8080/sclike/insert', {
            userId: this.currentUserId,
            scenicSpotId: this.scenicSpotId,
            likeTime: new Date().toISOString()
          });
          this.isLiked = true;
          ElMessage.success('点赞成功！');
        }
      } catch (error) {
        ElMessage.error('操作失败，请稍后再试。');
      }
    },
    async toggleCollect() {
      if (!this.currentUserId) {
        ElMessage.warning('请先登录才能收藏。');
        return;
      }

      try {
        if (this.isCollected) {
          await axios.delete(`http://localhost:8080/sf/deleteByUserAndScenic?userId=${this.currentUserId}&scenicSpotId=${this.scenicSpotId}`);
          this.isCollected = false;
          ElMessage.success('取消收藏成功！');
        } else {
          await axios.post('http://localhost:8080/sf/insert', {
            userId: this.currentUserId,
            scenicSpotId: this.scenicSpotId,
            favoriteTime: new Date().toISOString()
          });
          this.isCollected = true;
          ElMessage.success('收藏成功！');
        }
      } catch (error) {
        ElMessage.error('操作失败，请稍后再试。');
      }
    },
    async fetchScenicComments(scenicSpotId) {
      if (!scenicSpotId) return;
      try {
        const response = await axios.get(`http://localhost:8080/mw/sceniccomment/listByScenicSpotId/${scenicSpotId}`);
        this.comments = response.data || [];
      } catch (error) { }
    },
    async fetchGroupTours(scenicSpotId) {
      if (!scenicSpotId) return;
      try {
        const response = await axios.get(`http://localhost:8080/mw/groupTour/listByScenicSpotId/${scenicSpotId}`);
        this.groupTours = response.data.map(tour => {
          const startDate = new Date(tour.startDate).toLocaleDateString('zh-CN', { year: 'numeric', month: 'numeric', day: 'numeric' });
          const endDate = new Date(tour.endDate).toLocaleDateString('zh-CN', { year: 'numeric', month: 'numeric', day: 'numeric' });
          return {
            id: tour.groupTourID,
            img: tour.groupTourImageLinks && tour.groupTourImageLinks.length > 0 ? tour.groupTourImageLinks[0] : 'https://via.placeholder.com/100x70?text=Tour+Image',
            title: tour.groupTourName,
            scenic: tour.scenicAreaName || '未知景点',
            time: `${startDate} ~ ${endDate}`,
            participants: tour.recruitmentNumber,
            registered: tour.registrationCount || 0
          };
        });
      } catch (error) { }
    },
    goToGroupTourDetail(tourId) {
      this.$router.push(`/homepage/group-tour/detail/${tourId}`);
    },
    viewMoreGroupTours() {
      this.$router.push('/homepage/group-tour');
    },
    // 高德地图功能
    async initAMap() {
      // 1. 确保有数据
      if (!this.scenicDetail || !this.scenicDetail.regionId) return;

      // 2. 获取省、市、景点名
      const region = regionMap[this.scenicDetail.regionId];
      if (!region) return;
      const province = region.province;
      const city = region.city;
      const scenicName = this.scenicDetail.scenicAreaName;

      // 3. 等高德JS API加载完成
      await this.loadAMapScript();

      // 4. 获取经纬度
      try {
        const res = await axios.get('/api/amap/geocode', {
          params: { province, city, scenicName }
        });

        const { lng, lat } = res.data;
        if (!lng || !lat) throw new Error('未获取到经纬度');
        this.fetchSunriseSunset(lng, lat);

        // 5. 初始化地图
        const map = new window.AMap.Map(this.$refs.amapContainer, {
          zoom: 14,
          center: [lng, lat],
          resizeEnable: true
        });

        // 6. 创建标记和 InfoWindow
        const infoText = `<div style="font-weight:bold;">${province} ${city}<br/>${scenicName}</div>`;
        const marker = new window.AMap.Marker({
          position: [lng, lat],
          title: scenicName,
          map: map
        });
        const infoWindow = new window.AMap.InfoWindow({
          content: infoText,
          offset: new window.AMap.Pixel(0, -30)
        });
        infoWindow.open(map, marker.getPosition());
        marker.on('click', () => {
          infoWindow.open(map, marker.getPosition());
        });

      } catch (err) {
        console.error('地图定位失败：', err);
      }
    },

    loadAMapScript() {
      return new Promise((resolve, reject) => {
        if (window.AMap) return resolve();
        const script = document.createElement('script');
        script.src = 'https://webapi.amap.com/maps?v=2.0&key=fd864426a4e2302e79c552b8dfe177a4';
        script.onload = resolve;
        script.onerror = reject;
        document.body.appendChild(script);
      });
    },
    renderAMap({ lng, lat, address }) {
      if (!window.AMap) return;
      const container = this.$refs.amapContainer;
      if (!container) return;
      if (this.amapMarker && this.amapMarker.getMap()) {
        this.amapMarker.getMap().destroy();
      }
      // 创建地图
      const map = new window.AMap.Map(container, {
        center: [lng, lat],
        zoom: 15
      });
      // 创建标记
      const marker = new window.AMap.Marker({
        position: [lng, lat],
        title: address
      });
      map.add(marker);
      this.amapMarker = marker;
    },
    // 跳转到用户主页
    goToUserProfile(userId) {
      if (userId) {
        this.$router.push(`/user/profile/${userId}`);
      }
    },
  },
  mounted() {
    this.isComponentMounted = true;
  },
  beforeUnmount() {
    this.isComponentMounted = false;
    if (this.cancelSource) {
      this.cancelSource.cancel('Component unmounted.');
      this.cancelSource = null;
    }
    if (this.messageInstance) {
      this.messageInstance.close();
      this.messageInstance = null;
    }
    if (this.amapMarker && this.amapMarker.getMap()) {
      this.amapMarker.getMap().destroy();
    }
  },
  watch: {
    scenicDetail: {
      handler(val) {
        if (val && val.regionId && val.scenicAreaName) {
          this.$nextTick(() => this.initAMap());
        }
      },
      immediate: true
    },
    '$route.params.id': {
      handler: function (newId) {
        if (!newId || isNaN(Number(newId))) {
          this.scenicSpotId = null;
          this.scenicDetail = null;
          this.comments = [];
          this.groupTours = [];
          this.hotels = [];
          this.loading = false;
          return;
        }
        this.scenicSpotId = newId;
        this.fetchScenicDetail(newId);
        this.fetchScenicComments(newId);
        this.fetchGroupTours(newId);
        this.fetchHotelsByScenicSpot(newId); // 关键：每次切换景点时获取酒店
      },
      immediate: true,
    },
  },
};
</script>


<style scoped>
/* —— 日出日落悬浮按钮 —— */
.sunrise-sunset-fab {
  position: fixed;
  right: 32px;
  bottom: 90px;
  z-index: 9999;
  background: linear-gradient(135deg, #ffb347 0%, #ff5e62 60%, #3ec6e0 100%);
  color: #fff;
  border-radius: 50%;
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 32px rgba(63, 162, 220, 0.23), 0 0 0 6px rgba(255, 179, 71, 0.10);
  cursor: pointer;
  font-size: 34px;
  transition: transform 0.25s cubic-bezier(.4,2,.5,1), box-shadow 0.18s, background 0.35s;
  animation: fabFloat 3s ease-in-out infinite;
  outline: none;
  border: none;
}

.sunrise-sunset-fab:hover {
  transform: scale(1.12) translateY(-6px);
  box-shadow: 0 10px 38px 0 rgba(63, 162, 220, 0.35), 0 0 0 12px rgba(255, 179, 71, 0.18);
  background: linear-gradient(110deg, #ffe259 10%, #ffa751 60%, #43cea2 100%);
}


.fab-icon {
  filter: drop-shadow(0 0 12px #fffde1) drop-shadow(0 0 32px #ffb347);
  animation: fabIconGlow 2.2s infinite alternate;
  text-shadow: 0 0 18px #fff5cc, 0 0 26px #ffb347;
  user-select: none;
}


@keyframes fabFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes fabIconGlow {
  0% { filter: drop-shadow(0 0 12px #fffde1) drop-shadow(0 0 32px #ffb347);}
  100% { filter: drop-shadow(0 0 20px #fff8e5) drop-shadow(0 0 44px #43cea2);}
}



/* —— 玻璃拟态弹窗整体 —— */
.sunrise-sunset-dialog .el-dialog__wrapper {
  backdrop-filter: blur(10px);
}
.sunrise-sunset-dialog .el-dialog {
  background: linear-gradient(120deg, rgba(102, 126, 234, 0.75) 0%, rgba(118, 75, 162, 0.74) 100%);
  border-radius: 30px !important;
  box-shadow: 0 8px 40px 0 rgba(102, 126, 234, 0.23), 0 2px 16px 0 rgba(118, 75, 162, 0.12);
  backdrop-filter: blur(24px);
  border: 2.5px solid rgba(255,255,255,0.18);
  overflow: visible;
  padding-bottom: 0;
}
.sunrise-sunset-dialog .el-dialog__header {
  border-bottom: 1.5px solid rgba(255,255,255,0.16);
  padding-bottom: 10px;
  font-size: 1.2em;
  color: #fff;
  background: none;
  border-radius: 30px 30px 0 0;
}


/* —— 日出日落主内容动态背景动画 —— */
.sunrise-sunset-section {
  padding: 40px 18px 18px 18px;
  border-radius: 26px;
  margin-bottom: 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 400px;
  box-shadow: 0 8px 32px rgba(255, 183, 77, 0.13), 0 2px 16px rgba(255, 94, 77, 0.09);
  background: linear-gradient(180deg, #fbc2a0 0%, #f9d423 60%, #f83600 100%);
  /* 备用静态背景，防止动画不生效 */
  backdrop-filter: blur(10px);
  animation: sunriseSunsetBg 12s linear infinite alternate;
}

/* 动态动画层 */
.sunrise-sunset-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 50% at 50% 99%, #ffd48a 0%, #ffb347 30%, rgba(255,183,77,0.25) 80%, transparent 100%),
              radial-gradient(ellipse 100% 70% at 50% 0%, #ff5e62 0%, #ff9966 70%, transparent 100%);
  opacity: 0.66;
  animation: sunriseSunsetBgGlow 10s ease-in-out infinite alternate;
}

@keyframes sunriseSunsetBg {
  0% {
    background: linear-gradient(180deg, #fbc2a0 0%, #f9d423 60%, #f83600 100%);
  }
  20% {
    background: linear-gradient(180deg, #fbc2a0 0%, #ffe29f 60%, #ffb347 100%);
  }
  50% {
    background: linear-gradient(180deg, #ffd48a 0%, #ffb347 60%, #ff5e62 100%);
  }
  80% {
    background: linear-gradient(180deg, #fbc2a0 0%, #f9d423 60%, #f83600 100%);
  }
  100% {
    background: linear-gradient(180deg, #fa709a 0%, #fee140 80%, #f83600 100%);
  }
}

/* 动态光晕渐变（模拟太阳升降变化） */
@keyframes sunriseSunsetBgGlow {
  0% {
    opacity: 0.5;
    filter: blur(0px) brightness(1.12);
    background-position: 50% 99%, 50% 0%;
  }
  30% {
    opacity: 0.78;
    filter: blur(4px) brightness(1.17);
    background-position: 45% 95%, 50% 5%;
  }
  50% {
    opacity: 0.9;
    filter: blur(7px) brightness(1.22);
    background-position: 48% 85%, 50% 15%;
  }
  80% {
    opacity: 0.62;
    filter: blur(3px) brightness(1.12);
    background-position: 53% 93%, 50% 3%;
  }
  100% {
    opacity: 0.5;
    filter: blur(0px) brightness(1.08);
    background-position: 50% 99%, 50% 0%;
  }
}

/* 可选：添加漂浮云朵/光斑动画层（增强氛围） */
.sunrise-sunset-section::after {
  content: '';
  pointer-events: none;
  z-index: 1;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg width="800" height="180" xmlns="http://www.w3.org/2000/svg"><ellipse cx="110" cy="60" rx="80" ry="22" fill="white" opacity="0.12"/><ellipse cx="260" cy="30" rx="60" ry="16" fill="white" opacity="0.09"/><ellipse cx="430" cy="80" rx="120" ry="18" fill="white" opacity="0.10"/><ellipse cx="650" cy="50" rx="85" ry="19" fill="white" opacity="0.11"/></svg>');
  background-repeat: repeat-x;
  background-size: cover;
  opacity: 0.7;
  animation: cloudsMove 28s linear infinite;
}
@keyframes cloudsMove {
  0% { background-position-x: 0; }
  100% { background-position-x: 800px; }
}

/* 保证内容层级正常 */
.sunrise-sunset-section > * { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .sunrise-sunset-section { padding: 20px 2vw 10px 2vw; min-height: 260px; }
}

/* —— 日出日落时间卡片玻璃拟态 & 动画 —— */
.sun-times-row {
  margin-bottom: 30px;
  gap: 0 18px;
  display: flex;
  flex-wrap: nowrap; /* 重要：禁止自动换行 */
}
.sun-time-card {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  padding: 26px 18px 19px 18px;
  margin-bottom: 10px;
  box-shadow: 0 2px 13px rgba(255, 200, 100, 0.10), 0 0.5px 2px rgba(0,0,0,0.10);
  text-align: center;
  transition: all 0.35s cubic-bezier(.4,2,.5,1), box-shadow 0.15s;
  position: relative;
  overflow: visible;
  min-width: 210px;
  min-height: 128px;
  margin-right: 12px;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
   white-space: nowrap; /* 禁止卡片内容自动换行 */
   
}

.sun-time-card:hover {
  transform: translateY(-11px) scale(1.045);
  box-shadow: 0 18px 44px rgba(255, 207, 100, 0.18), 0 0 0 7px rgba(255,255,255,.08);
  background: rgba(255,255,255,0.32);
}

.sunrise-card {
  background: linear-gradient(120deg, rgba(255, 200, 100, 0.23), rgba(255, 183, 77, 0.11));
  border: 2px solid rgba(255, 183, 77, 0.19);
}
.sunset-card {
  background: linear-gradient(120deg, rgba(255, 94, 77, 0.14), rgba(255, 154, 0, 0.10));
  border: 2px solid rgba(255, 94, 77, 0.15);
}

/* 太阳图标+旋转脉冲光效 */
.sun-icon-container {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 62px;
  height: 62px;
}
.sun-icon {
  font-size: 2.7em;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 10px #ffe6a5);
  animation: sunPulse 1.7s infinite alternate;
  transition: filter 0.2s;
}
.sun-time-card:hover .sun-icon {
  filter: drop-shadow(0 0 22px #fff9e0) drop-shadow(0 0 12px #ffd59e);
}
.sun-animation {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.27;
  z-index: 1;
  pointer-events: none;
}
.sunrise-animation {
  background: radial-gradient(circle, rgba(255, 183, 77, 0.47), rgba(255, 183, 77, 0));
  animation: sunriseGlow 2.8s ease-in-out infinite alternate, sunSpin 8s linear infinite;
}
.sunset-animation {
  background: radial-gradient(circle, rgba(255, 94, 77, 0.33), rgba(255, 94, 77, 0));
  animation: sunsetGlow 2.7s ease-in-out infinite alternate, sunSpin 8s linear infinite reverse;
}
@keyframes sunPulse {
  0% { filter: drop-shadow(0 0 8px #ffe6a5);}
  100% { filter: drop-shadow(0 0 28px #fff5cc);}
}
@keyframes sunSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg);}
  100% { transform: translate(-50%, -50%) rotate(360deg);}
}
@keyframes sunriseGlow {
  0% { opacity: 0.27; }
  100% { opacity: 0.09; }
}
@keyframes sunsetGlow {
  0% { opacity: 0.27; }
  100% { opacity: 0.09; }
}
.sun-time-details {
  color: #fff;
  text-shadow: 0 1px 4px rgba(255,183,77,0.10);
  width: 100%;
}
.sun-time-label {
  font-size: 1.10em; margin-bottom: 8px; font-weight: 600; opacity: 0.92;
}
.sun-time-value {
  font-size: 2.3em;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(255,183,77,0.13), 0 1.5px 8px #fffcd7;
  font-family: 'JetBrains Mono', 'Menlo', 'monospace';
  letter-spacing: 0.04em;
}
.best-viewing-time {
  font-size: 0.97em;
  opacity: 0.82;
  background: rgba(255,255,255,0.16);
  padding: 4px 18px;
  border-radius: 18px;
  display: inline-block;
  margin-top: 5px;
  color: #ffdea2;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* —— 详细信息网格美化 —— */
.sun-detailed-info {
  background: rgba(255,255,255,0.08);
  border-radius: 13px;
  padding: 19px 12px;
  margin-bottom: 18px;
  /* 修正为弹性布局，内容自动均匀排列不换行 */
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 18px;
  backdrop-filter: blur(7px);
  min-height: 80px;
}
.sun-detailed-info .info-item {
  /* 每项等宽分布 */
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.13);
  border-radius: 10px;
  padding: 12px 8px;
  margin: 0;
  text-align: left;
  font-size: 15px;
  box-sizing: border-box;
  transition: background 0.2s, transform 0.18s;
}

.sun-detailed-info .info-item:not(:last-child) {
  margin-right: 0;
}

.sun-detailed-info .info-item:hover {
  background: rgba(255,255,255,0.21);
  transform: translateY(-2px) scale(1.04);
}
.info-icon {
  font-size: 1.4em;
  width: 34px;
  text-align: center;
  filter: drop-shadow(0 0 4px #fff4bd);
  margin-bottom: 0;
}
.info-content { flex: 1; min-width: 0; }
.info-label { font-size: 0.95em; opacity: 0.75; margin-bottom: 2px; white-space: nowrap;}
.info-value { font-size: 1.13em; font-weight: bold; word-break: break-all; }

@media (max-width: 900px) {
  .sun-detailed-info {
    flex-wrap: wrap;
    gap: 12px 8px;
  }
  .sun-detailed-info .info-item {
    flex: 1 1 45%;
    min-width: 120px;
    margin-bottom: 0;
  }
}

@media (max-width: 600px) {
  .sun-detailed-info {
    flex-direction: column;
    gap: 10px 0;
    min-height: 0;
  }
  .sun-detailed-info .info-item {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }
}
/* —— 状态指示器美化 —— */
.current-status {
  text-align: center;
  margin-top: 13px;
}
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border-radius: 34px;
  font-weight: 500;
  font-size: 1.07em;
  background: rgba(255,255,255,0.15);
  color: #fffbe6;
  border: 2.5px solid rgba(255,255,255,0.13);
  animation: statusPulse 2.4s ease-in-out infinite;
  box-shadow: 0 1.5px 8px 0 rgba(255,183,77,0.11);
  transition: background 0.22s, color 0.22s;
}
.status-indicator.sunrise { background: rgba(255, 183, 77, 0.22); color: #fff3d0; border-color: rgba(255,183,77,0.33);}
.status-indicator.sunset { background: rgba(255,94,77,0.22); color: #ffe3e3; border-color: rgba(255,94,77,0.28);}
.status-indicator.night { background: rgba(72,61,139,0.21); color: #dde3ff; border-color:rgba(72,61,139,0.25);}
.status-indicator.day { background: rgba(255,215,0,0.15); color: #fff6c1; border-color:rgba(255,215,0,0.21);}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}
.status-icon { font-size: 1.28em; }


/* —— 摄影建议卡片网格美化 —— */
.viewing-suggestions {
  background: rgba(255,255,255,0.10);
  border-radius: 13px;
  padding: 18px 12px;
  margin-bottom: 12px;
  backdrop-filter: blur(5px);
  box-shadow: 0 1.5px 8px rgba(102, 126, 234, 0.07);
}
.suggestion-title {
  font-size: 1.18em;
  font-weight: bold;
  margin-bottom: 13px;
  text-align: center;
  color: #ffd180;
  letter-spacing: 0.03em;
}
.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 18px;
}
@media (max-width: 900px) {
  .suggestions-grid { grid-template-columns: 1fr; }
}
.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 10px;
  background: rgba(255,255,255,0.19);
  border-radius: 8px;
  transition: background 0.2s, transform 0.19s;
  box-shadow: 0 1px 5px rgba(255, 183, 77, 0.05);
}
.suggestion-item:hover {
  background: rgba(255,255,255,0.29);
  transform: translateY(-4px) scale(1.03);
}
.suggestion-icon {
  font-size: 1.21em;
  margin-top: 2px;
  filter: drop-shadow(0 0 4px #ffb347bb);
}
.suggestion-text {
  font-size: 0.98em;
  line-height: 1.5;
  color: #fff;
}

.sunrise-sunset-loading {
  padding: 32px 0;
  min-height: 140px;
}
.sunrise-sunset-error {
  text-align: center;
  padding: 50px 12px;
  position: relative;
  z-index: 1;
}
.error-content {
  background: rgba(255,255,255,0.11);
  border-radius: 14px;
  padding: 30px 12px;
  backdrop-filter: blur(16px);
  color: #fff;
}
.error-icon {
  font-size: 2.2em;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 7px #fffbe9);
}
.error-content p {
  font-size: 1.07em;
  margin-bottom: 18px;
  opacity: 0.92;
}


/* —— 自定义滚动条、动画、移动端适配 —— */
.sunrise-sunset-dialog .el-dialog__body {
  overflow-y: auto;
  max-height: 72vh;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: #e6b600 #dcdcdc;
  transition: max-height 0.3s;
}
.sunrise-sunset-dialog .el-dialog__body::-webkit-scrollbar {
  width: 8px;
  background: rgba(255,255,255,0.11);
  border-radius: 8px;
}
.sunrise-sunset-dialog .el-dialog__body::-webkit-scrollbar-thumb {
  background: linear-gradient(120deg, #ffb347 10%, #ff5e62 90%);
  border-radius: 7px;
}
@media (max-width: 700px) {
  .sunrise-sunset-dialog .el-dialog {
    width: 98vw !important;
    min-width: 0 !important;
    padding: 0 1px;
    border-radius: 12px !important;
  }
  .sunrise-sunset-section {
    padding: 8vw 4vw 8vw 4vw;
    min-height: 120px;
    border-radius: 11px;
  }
  .sun-time-card { min-width: 0; padding: 10px 2vw; }
  .sun-detailed-info { grid-template-columns: 1fr 1fr; padding: 9px 3px;}
  .suggestions-grid { grid-template-columns: 1fr; }
}


/* —— 动画过渡 —— */
.sunrise-sunset-dialog .el-dialog,
.sunrise-sunset-dialog .el-dialog__body,
.sunrise-sunset-section,
.sun-time-card,
.info-item,
.suggestion-item {
  transition: all 0.32s cubic-bezier(.4,2,.5,1), box-shadow 0.17s;
}



.sunrise-sunset-fab {
  position: fixed;
  right: 32px;
  bottom: 90px;
  z-index: 9999;
  background: linear-gradient(135deg, #ffefa1 0%, #ffc56a 100%);
  color: #ff9800;
  border-radius: 50%;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(255, 152, 0, 0.25);
  cursor: pointer;
  transition: box-shadow 0.2s;
  font-size: 30px;
}
.sunrise-sunset-fab:hover {
  box-shadow: 0 8px 32px rgba(255, 152, 0, 0.35);
}
.fab-icon {
  user-select: none;
}
.sunrise-sunset-dialog .el-dialog__header {
  border-bottom: 1px solid #f0f0f0;
}
.sunrise-sunset-section {
  padding: 10px 0;
}
.sunrise-sunset-loading {
  padding: 20px 0;
}
.sun-time-card {
  background: #fffbe6;
  border-radius: 10px;
  padding: 18px 10px;
  margin-bottom: 10px;
  box-shadow: 0 1px 5px rgba(255, 200, 100, 0.12);
  text-align: center;
}
.sun-time-label {
  font-weight: bold;
  margin-bottom: 2px;
}
.sun-time-value {
  font-size: 22px;
  font-family: monospace;
}
.best-viewing-time {
  font-size: 13px;
  color: #ff9800;
  margin-top: 5px;
}
.sun-detailed-info {
  background: rgba(255,255,255,0.08);
  border-radius: 13px;
  padding: 19px 12px;
  margin-bottom: 18px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 15px;
}
.info-item {
  width: 250px; 
  height: 110px; 
  flex: 1 1 0;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.13);
  border-radius: 10px;
  padding: 12px 8px;
  /* 保证内容一直可见 */
  opacity: 1;
  visibility: visible;
}
.info-icon {
  font-size: 1.4em;
  width: 34px;
  text-align: center;
}
.info-content { flex: 1; min-width: 0; }
.info-label { font-size: 0.95em; opacity: 0.75; margin-bottom: 2px; }
.info-value { font-size: 1.13em; font-weight: bold; word-break: break-all; white-space: normal; }
.suggestion-title {
  font-weight: bold;
  color: #ff9800;
  margin: 14px 0 6px 0;
}
.suggestions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 7px;
}
.suggestion-item {
  display: flex;
  align-items: flex-start;
  min-height: 22px;
  font-size: 14px;
  margin-bottom: 2px;
}
.suggestion-icon {
  margin-right: 6px;
  font-size: 17px;
}
.current-status {
  margin-top: 10px;
}
.status-indicator {
  display: inline-flex;
  align-items: center;
  padding: 5px 15px;
  border-radius: 18px;
  font-size: 15px;
  background: #fffbe6;
  color: #e69500;
  border: 1px solid #ffe0b2;
}
.status-indicator.sunset {
  background: #ffe0b2;
  color: #e67c00;
}
.status-indicator.sunrise {
  background: #fffde6;
  color: #ffb300;
}
.status-indicator.night {
  background: #e3e3ff;
  color: #7986cb;
}
.status-indicator.day {
  background: #ffe0b2;
  color: #e67c00;
}
.status-icon {
  margin-right: 6px;
  font-size: 18px;
}

.sunrise-sunset-section {
  padding: 25px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  margin-bottom: 30px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  color: white;
  position: relative;
  overflow: hidden;
}

.sunrise-sunset-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="stars" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="0.5" fill="white" opacity="0.3"/><circle cx="15" cy="8" r="0.3" fill="white" opacity="0.5"/><circle cx="8" cy="15" r="0.4" fill="white" opacity="0.4"/></pattern></defs><rect width="100%" height="100%" fill="url(%23stars)"/></svg>') repeat;
  opacity: 0.1;
  pointer-events: none;
}

.sunrise-sunset-section h3 {
  color: white;
  text-align: center;
  font-size: 1.8em;
  margin-bottom: 25px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

.sunrise-sunset-loading {
  position: relative;
  z-index: 1;
}

.sunrise-sunset-content {
  position: relative;
  z-index: 1;
}

.sun-times-row {
  margin-bottom: 25px;
}

.sun-time-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sun-time-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  background: rgba(255, 255, 255, 0.2);
}

.sunrise-card {
  background: linear-gradient(135deg, rgba(255, 183, 77, 0.3), rgba(255, 138, 101, 0.3));
}

.sunset-card {
  background: linear-gradient(135deg, rgba(255, 94, 77, 0.3), rgba(255, 154, 0, 0.3));
}

.sun-icon-container {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
}

.sun-icon {
  font-size: 3em;
  display: block;
  position: relative;
  z-index: 2;
}

.sun-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.3;
  z-index: 1;
}

.sunrise-animation {
  background: radial-gradient(circle, rgba(255, 183, 77, 0.6), rgba(255, 183, 77, 0));
  animation: sunriseGlow 3s ease-in-out infinite alternate;
}

.sunset-animation {
  background: radial-gradient(circle, rgba(255, 94, 77, 0.6), rgba(255, 94, 77, 0));
  animation: sunsetGlow 3s ease-in-out infinite alternate;
}

@keyframes sunriseGlow {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.1; }
}

@keyframes sunsetGlow {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.1; }
}

.sun-time-details {
  color: white;
}

.sun-time-label {
  font-size: 1.1em;
  margin-bottom: 8px;
  opacity: 0.9;
  font-weight: 500;
}

.sun-time-value {
  font-size: 2.2em;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.best-viewing-time {
  font-size: 0.9em;
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 12px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 5px;
}

.sun-detailed-info {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
  backdrop-filter: blur(5px);
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.info-icon {
  font-size: 1.5em;
  width: 40px;
  text-align: center;
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 0.85em;
  opacity: 0.8;
  margin-bottom: 2px;
}

.info-value {
  font-size: 1.1em;
  font-weight: bold;
}

.viewing-suggestions {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  backdrop-filter: blur(5px);
}

.suggestion-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.suggestion-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.suggestion-icon {
  font-size: 1.2em;
  margin-top: 2px;
}

.suggestion-text {
  font-size: 0.9em;
  line-height: 1.4;
}

.current-status {
  text-align: center;
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 500;
  animation: statusPulse 2s ease-in-out infinite;
}

.status-indicator.sunrise {
  background: rgba(255, 183, 77, 0.3);
  border: 2px solid rgba(255, 183, 77, 0.5);
}

.status-indicator.sunset {
  background: rgba(255, 94, 77, 0.3);
  border: 2px solid rgba(255, 94, 77, 0.5);
}

.status-indicator.night {
  background: rgba(72, 61, 139, 0.3);
  border: 2px solid rgba(72, 61, 139, 0.5);
}

.status-indicator.day {
  background: rgba(255, 215, 0, 0.3);
  border: 2px solid rgba(255, 215, 0, 0.5);
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.status-icon {
  font-size: 1.2em;
}

.sunrise-sunset-error {
  text-align: center;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

.error-content {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  backdrop-filter: blur(10px);
}

.error-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.error-content p {
  font-size: 1.1em;
  margin-bottom: 20px;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sunrise-sunset-section {
    padding: 20px 15px;
  }
  
  .sun-time-value {
    font-size: 1.8em;
  }
  
  .suggestions-grid {
    grid-template-columns: 1fr;
  }
  
  .info-item {
    padding: 10px;
  }
}

.route-panel {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e6ecf0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  min-height: 200px;
  max-height: 320px;
  overflow-y: auto;
  padding: 18px 20px 10px 20px;
  color: #34495e;
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 8px;
}
.no-route-tip {
  color: #aaa;
  text-align: center;
  margin: 30px 0;
  font-size: 15px;
}
.route-group + .route-group {
  margin-top: 16px;
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
}
.route-group-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-bottom: 6px;
}
.route-start-point, .route-end-point {
  display: inline-block;
  background: #409eff;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 14px;
  text-align: center;
  line-height: 22px;
  margin-right: 8px;
  font-weight: bold;
}
.route-end-point {
  background: #67c23a;
  margin-left: 8px;
}
.road-name {
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}
.route-details {
  font-size: 13px;
  color: #888;
  margin-left: 8px;
  display: flex;
  align-items: center;
}
.route-group-steps {
  margin-left: 16px;
}
.route-step {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #444;
  margin-bottom: 3px;
}
.route-arrow {
  font-size: 16px;
  margin-right: 8px;
}
.ml8 {
  margin-left: 8px;
}

.map-section {
  padding: 0 20px 24px 20px;
  background: #f5f7fa;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
}
.map-guides-row {
  margin-bottom: 16px;
}
.map-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 0;
  height: 340px;
  position: relative;
  overflow: hidden;
  border: 1px solid #e6ecf0;
  transition: box-shadow 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.amap-container {
  width: 100%;
  height: 320px;
  min-height: 180px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.map-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  margin-top: 12px;
}
.map-view-more {
  color: #007AFF;
  cursor: pointer;
  font-size: 13px;
  margin-left: 12px;
  transition: color 0.2s;
}
.map-view-more:hover {
  color: #0051a8;
}

.scenic-detail-page {
  padding: 100px 20px;
  /* background: #f8fafd;  // 删除原背景 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Aligns content to the top */
}
.scenic-detail-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background:
    linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(107, 91, 149, 0.8)),
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80') center/cover;
  z-index: 0;
  pointer-events: none;
}
.scenic-detail-page > * {
  position: relative;
  z-index: 1;
}
.content-wrapper {
  width: 95vw;
  /* Occupy more width for two columns */
  max-width: 1200px;
  /* Maximum width for larger screens */
  margin-top: 20px;
}

.loading-container {
  width: 80vw;
  max-width: 800px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.empty-scenic-detail {
  margin-top: 50px;
}

.scenic-detail-card,
.comments-card,
.hotel-recommendation-card,
.group-tour-section,
.weather-section,
.map-section,
.tour-item-card,
.hotel-item-box {
  background: rgba(255,255,255,0.13); /* 或你喜欢的半透明色 */
  border: none !important;
  box-shadow: 0 2px 12px rgba(102,126,234,0.13);
  border-radius: 18px;
  backdrop-filter: blur(8px); /* 可选，增加玻璃感 */
}

.card-header, .scenic-info-section, .scenic-info-beside-image, .comment-list, .comment-input-section, .hotel-list, .tour-list {
  border: none !important;
}

.el-divider {
  border: none !important;
  background: rgba(255,255,255,0.08) !important;
  height: 24px;
}

/* 移除外层白色边框 */
.scenic-detail-page, .content-wrapper {
  box-shadow: none !important;
}

.card-header {
  font-size: 1.8em;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding-bottom: 10px;
}

/* Scenic image and description side-by-side */
.scenic-intro-row {
  margin-bottom: 20px;
}

.scenic-image-flipbook {
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  border-radius: 0 0 18px 18px;
}

.flipbook-swiper {
  width: 100%;
  height: 100%;
}

.flipbook-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 10;
}

.carousel-button {
  background: rgba(102,126,234,0.7);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.3em;
  border: none;
  box-shadow: 0 2px 8px rgba(102,126,234,0.13);
  transition: background 0.2s;
}
.carousel-button:hover {
  background: rgba(118,75,162,0.9);
}
.carousel-indicators span {
  width: 12px; height: 12px;
  background: #fff;
  opacity: 0.5;
  border: 2px solid #667eea;
}
.carousel-indicators span.active {
  opacity: 1;
  background: #667eea;
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.carousel-indicators span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-indicators span.active {
  background-color: rgba(255, 255, 255, 0.9);
}

.scenic-info-section,
.weather-section,
.group-tour-section,
.hotel-recommendation-section,
.comment-list,
.comment-input-section {
  padding: 0 20px;
  margin-bottom: 20px;
}

.scenic-info-beside-image {
  padding-left: 0;
  /* Remove left padding to align with image */
}

.scenic-info-section h3,
.scenic-info-section .region-info,
.scenic-info-section .scenic-address,
.scenic-info-section .scenic-description,
.scenic-info-section p {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.scenic-info-beside-image h3 {
  font-size: 1.5em;
  /* Make it more prominent for the main description */
  margin-top: 0;
  /* Adjust to align with image top */
  border-bottom: none;
  padding-bottom: 0;
  display: block;
  /* Ensure it takes full width */
}

.scenic-description {
  font-size: 1.1em;
  line-height: 1.8;
  color: #555;
  text-align: justify;
  /* Aligns text to both left and right margins */
}

.social-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 15px;
  font-size: 1.1em;
  color: #666;
}

.action-item {
  cursor: pointer;
  transition: color 0.3s ease;
}

.action-item:hover {
  color: #42b983;
}

/* Weather Section Boxes */
.weather-details-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* gap: 15px; */
  /* Gutter handles spacing */
}

.weather-item-box {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Align text to start */
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  transition: box-shadow 0.3s ease;
  height: 120px;
  /* Fixed height for uniformity */
  justify-content: space-around;
  /* Distribute content vertically */
}

.weather-item-box:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.weather-item-box i {
  font-size: 2.2em;
  color: #42b983;
  margin-bottom: 8px;
}

.weather-item-box span {
  font-size: 1.1em;
  color: #555;
}

.weather-item-box .weather-value {
  font-weight: bold;
  color: #333;
  font-size: 1.2em;
}

.weather-view-more {
  width: 100%;
  text-align: right;
  margin-top: 10px;
}

/* Removed Map Section Boxes (Map and Guides) */

.hotel-grid-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0;
  /* Changed to 0, relying on gutter */
  margin-right: 0;
  /* Changed to 0, relying on gutter */
  margin-bottom: 10px;
}

.hotel-grid-row .el-col {
  width: 50%;
  box-sizing: border-box;
  padding-left: 10px;
  /* Aligned with half of 20px gutter */
  padding-right: 10px;
  /* Aligned with half of 20px gutter */
  margin-bottom: 30px;
}

.hotel-item-box {
  width: 360px;
  min-width: 260px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.13);
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(102,126,234,0.13);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.hotel-item-box:hover {
  box-shadow: 0 8px 32px rgba(102,126,234,0.18);
}

.hotel-box-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 24px 24px 0 0;
  display: block;
}

.hotel-actions .el-button {
  position: absolute;
  top: 18px;
  right: 18px;
  border-radius: 22px;
  padding: 4px 22px;
  font-size: 1em;
  background: linear-gradient(135deg, #ffd700 0%, #ff9800 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,152,0,0.13);
  z-index: 2;
}

.hotel-box-info {
  padding: 14px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 90px;
  position: relative;
}

.hotel-box-title {
  font-size: 1.15em;
  font-weight: bold;
  margin-bottom: 2px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.hotel-box-rating {
  font-size: 1em;
  color: #fff;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}

.hotel-box-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin-top: 8px;
}

.hotel-box-price {
  font-weight: bold;
  color: #ffd700;
  font-size: 1.25em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.18);
  align-self: flex-end;
  margin-left: auto;
}

.comment-list {
  max-height: 500px;
  /* Limit height for scrollable comments */
  overflow-y: auto;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.comment-item {
  background: rgba(102,126,234,0.07);
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 4px rgba(102,126,234,0.07);
}
.comment-header .user-avatar {
  border: 2px solid #667eea;
}
.comment-input-section .el-input {
  border-radius: 18px;
  background: #f7f8fa;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #dcdcdc;
  /* Placeholder for avatar */
  margin-right: 10px;
  overflow: hidden;
  cursor: pointer; /* Add cursor pointer to indicate clickability */
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.comment-date {
  font-size: 0.85em;
  color: #999;
}

.comment-content p {
  font-size: 0.95em;
  color: #555;
  line-height: 1.6;
}

.load-more-comments {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  color: #42b983;
}

.comment-input-section {
  display: flex;
  gap: 10px;
  padding: 0 20px 20px;
}

.comment-input-section .el-input {
  flex-grow: 1;
}

.comment-input-section .el-button {
  width: 80px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .content-wrapper {
    width: 95vw;
    max-width: none;
  }

  .el-col-16,
  .el-col-8 {
    width: 100%;
    /* Stack columns on smaller screens */
  }

  .scenic-intro-row .el-col,
  .weather-details-row .el-col {
    width: 100%;
    /* Stack on small screens */
  }

  .scenic-image-flipbook {
    height: 200px;
    /* Adjust height for better mobile viewing */
  }

  .hotel-grid-row .el-col {
    width: 100%;
    /* Stack on small screens */
  }
}

/* Group Tour Section */
.tour-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.tour-item-card {
  display: flex;
  align-items: center;
  /* Align image and text vertically */
  gap: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  transition: box-shadow 0.3s ease;
  position: relative;
  /* For positioning the button */
}

.tour-item-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tour-card-image {
  width: 100px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  /* Prevent image from shrinking */
}

.tour-card-info {
  flex-grow: 1;
  /* Allow info to take remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 80px;
  /* Make space for the button */
}

.tour-card-title {
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
  margin-bottom: 5px;
}

.tour-card-details {
  font-size: 0.95em;
  color: #666;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  /* Stack details vertically */
}

.view-tour-details-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #42b983;
  font-size: 0.9em;
  padding: 5px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.3s ease;
}

.view-tour-details-btn:hover {
  color: #2c3e50;
}

@media (max-width: 768px) {
  .tour-item-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .view-tour-details-btn {
    position: static;
    transform: none;
    margin-top: 10px;
    align-self: flex-end;
  }
}

.themed-view-more {
  display: block;
  width: 100%;
  text-align: right;
  margin-top: 10px;
  font-size: 1em;
  font-weight: bold;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  cursor: pointer;
  letter-spacing: 1px;
  transition: opacity 0.2s;
}
.themed-view-more:hover {
  opacity: 0.7;
}

:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --card-bg: rgba(255,255,255,0.85);
  --card-radius: 18px;
  --card-shadow: 0 4px 24px rgba(102, 126, 234, 0.13);
}

.el-button, .action-button {
  border-radius: 22px !important;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.13);
  transition: background 0.2s, box-shadow 0.2s;
}
.el-button:hover, .action-button:hover {
  background: linear-gradient(90deg, #764ba2 0%, #667eea 100%);
  box-shadow: 0 6px 18px rgba(102, 126, 234, 0.18);
}

/* 全局字体白色 */
.scenic-detail-card,
.comments-card,
.hotel-recommendation-card,
.tour-item-card,
.weather-section,
.group-tour-section,
.hotel-box-info,
.comment-item,
.card-header,
.hotel-box-title,
.hotel-box-rating,
.hotel-box-details,
.hotel-tag,
.hotel-box-price,
.user-name,
.comment-date,
.comment-content p,
.suggestion-title,
.suggestion-text,
.status-indicator,
.sun-time-label,
.sun-time-value,
.info-label,
.info-value {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* 次要信息淡色 */
.comment-date,
.reviews-count,
.hotel-tag {
  color: rgba(255,255,255,0.7) !important;
}

.hotel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-start;
}

.hotel-item-box {
  width: 360px;
  min-width: 260px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.13);
  border-radius: 24px;
  box-shadow: 0 2px 12px rgba(102,126,234,0.13);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.hotel-item-box:hover {
  box-shadow: 0 8px 32px rgba(102,126,234,0.18);
}

.hotel-box-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 24px 24px 0 0;
  display: block;
}

.hotel-actions .el-button {
  position: absolute;
  top: 18px;
  right: 18px;
  border-radius: 22px;
  padding: 4px 22px;
  font-size: 1em;
  background: linear-gradient(135deg, #ffd700 0%, #ff9800 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,152,0,0.13);
  z-index: 2;
}

.hotel-box-info {
  padding: 14px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 90px;
  position: relative;
}

.hotel-box-title {
  font-size: 1.15em;
  font-weight: bold;
  margin-bottom: 2px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.hotel-box-rating {
  font-size: 1em;
  color: #fff;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}

.hotel-box-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin-top: 8px;
}

.hotel-box-price {
  font-weight: bold;
  color: #ffd700;
  font-size: 1.25em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.18);
  align-self: flex-end;
  margin-left: auto;
}

@media (max-width: 700px) {
  .hotel-list {
    flex-direction: column;
    gap: 10px;
  }
  .hotel-item-box {
    width: 100%;
    min-width: 0;
    height: auto;
  }
}

/* 只让地图容器内字体为黑色，优先级高于全局白色 */
.amap-container,
.amap-container * {
  color: #222 !important;
  text-shadow: none !important;
}

.scenic-image-flipbook-row {
  margin-bottom: 20px;
  display: block;
  width: 100%;
}
.scenic-image-flipbook {
  width: 700px;
  max-width: 100%;
  height: 350px;
  position: relative;
  overflow: visible;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13);
  margin: 0 auto;
  background: rgba(255,255,255,0.05);
}
@media (max-width: 900px) {
  .scenic-image-flipbook {
    width: 98vw;
    height: 220px;
    min-width: 0;
  }
}
.flipbook-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
}
.image-caption {
  margin-top: 12px;
  color: #fff;
  font-size: 1.1em;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.my-carousel-wrapper {
  width: 100%;
  height: 350px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.my-carousel-wrapper .carousel__slide {
  min-width: 100px !important;
}
.my-carousel-wrapper .carousel__prev,
.my-carousel-wrapper .carousel__next {
  display: block !important;
}

.simple-carousel {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(102,126,234,0.7);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.3em;
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(102,126,234,0.13);
  cursor: pointer;
  transition: background 0.2s;
}
.carousel-button.left { left: 10px; }
.carousel-button.right { right: 10px; }
.carousel-button:hover { background: rgba(118,75,162,0.9); }
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.carousel-indicators span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.carousel-indicators span.active {
  background-color: rgba(255, 255, 255, 0.9);
}
</style> 